<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<style>
			.mui-bar-nav {
				background: #f16456;
				height: 58px;
			}
			
			.mui-bar .mui-title {
				margin-top: 18px;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 58px;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #FFFFFF!important;
				margin-top: 17px;
			}
			
			.mui-input-row label {
				font-family: 'Helvetica Neue', Helvetica, sans-serif;
				line-height: 1.1;
				float: left;
				width: 35%;
				padding: 11px 5px;
				font-size: 14px;
				color: #666;
			}
			
			.mui-btn {
				border: 1px solid #f16456;
				width: 300px;
				background-color: #f16456;
			}
			
			.mui-btn:active {
				border: 1px solid #de7c79!important;
				background-color: #de7c79!important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title" id="title">手机号绑定</h1>
		</header>
		<div class="mui-content" id="bizVue">
			<p style="margin: 10px;">
				**请绑定常用手机号
			</p>
			<div class="mui-input-row" style="background: white;margin-top: 5px;margin-left: 5px;margin-right: 5px;">
				<label>手机号:</label>
				<input type="text" class="mui-input-clear" placeholder="请输入手机号" v-model="mobile" maxlength="11">
			</div>
			<div style="margin-top: -36px;margin-right: 5px;position: absolute;right: 0px;z-index: 1;">
				<button type="button" class="mui-btn-warning" style="width: 100px;" @click="sendMsg" :disabled="txt != '发送验证码'">{{txt}}</button>
			</div>
			<div class="mui-input-row" style="background: white;margin-top: 5px;margin-left: 5px;margin-right: 5px;">
				<label>验证码:</label>
				<input type="text" class="mui-input-clear" placeholder="短信验证码" maxlength="4" v-model="captcha">
			</div>
			<div class="mui-input-row" style="background: white;margin-top: 5px;margin-left: 5px;margin-right: 5px;">
				<label>邀请码:</label>
				<input type="text" class="mui-input-clear" placeholder="邀请码选填" maxlength="6" @input="recPerson=recPerson.toUpperCase()" v-model="recPerson">
			</div>
			<div class="mui-button-row" style="margin-bottom: 20px;margin-top: 10px;">
				<button type="button" class="mui-btn mui-btn-primary" @click="bindMobile()">提交</button>&nbsp;&nbsp;
			</div>
		</div>

		<script src="../js/mui.min.js "></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/validator.min.js"></script>
		<script type="text/javascript ">
			mui.init({
				swipeBack: false
			});

			var vm = new Vue({
				el: '#bizVue',
				data: {
					txt: "发送验证码",
					captcha: "",
					mobile: "",
					recPerson: "",
					member: {}
				},
				mounted: function() {
					mui.plusReady(function() {
						vm.member = JSON.parse(plus.storage.getItem("member"));
					})
				},
				methods: {
					sendMsg: function() {
						if(!validator.isMobilePhone(vm.mobile, 'zh-CN')) {
							mymui("请输入正确的手机号");
							return;
						}
						vm.txt = "正在发送...";
						mui.postParam(SendBindCode, {
							mobile: vm.mobile
						}, function(result) {
							if(result.code == 0) {
								if(vm.recPerson == "" && result.recPerson) {
									vm.recPerson = result.recPerson;
								}
								var i = 60;
								var timer = window.setInterval(function() {
									i--;
									if(i > 0) {
										vm.txt = i + "秒后再发";
									} else {
										vm.txt = "发送验证码";
										window.clearInterval(timer);
									}
								}, 1000);
							} else {
								vm.txt = "发送验证码";
								mymui(result.msg);
							}
						});
					},
					bindMobile: function() {
						if(!validator.isMobilePhone(vm.mobile, 'zh-CN')) {
							mymui("请输入正确的手机号");
							return;
						}
						if(validator.isEmpty(vm.captcha)) {
							mymui("请输入短信验证码");
							return;
						}
						mui.postJSON(BindMobile, {
							mobile: vm.mobile,
							captcha: vm.captcha,
							recPerson: vm.recPerson
						}, function(result) {
							if(result.code == 0) {
								vm.member.mobile = vm.mobile;
								plus.storage.setItem("member", JSON.stringify(vm.member));
								mymui('手机号绑定成功');
								sourceBack();
							} else {
								mymui(result.msg);
							}
						});
					}
				}
			});

			var sourceBack = mui.back;
			var _toast = false;
			mui.back = function() {
				if(!_toast) {
					_toast = true;
					mymui('再按一次返回键退出');
					setTimeout(function() {
						_toast = false;
					}, 1500);
				} else {
					plus.runtime.quit();
				}
			}
		</script>
	</body>

</html>